<template>
  <ul class="sideMenu">
    <!-- 一级菜单 -->
    <li v-for="(menu, index) in menus" v-if="!menu.meta.hidden" :key="index">
      <a-popover
        placement="rightTop"
        trigger="hover"
        :visible="visibleData[index][`visible_${menu.name}`]"
        :class="{ item: true, collapsed: collapsed }"
        @visibleChange="handleHoverChange(index, `visible_${menu.name}`, menu.meta)"
      >
        <a-button
          ghost
          block
          :class="{routeBtn: true, routeActive: selectedMenu(menu.path)}"
          @click="outLink(menu.meta, menu.path)"
        >
          <a-icon
            :type="typeof (menu.meta.icon) === 'object' ? '' : menu.meta.icon"
            :component="typeof (menu.meta.icon) === 'object' ? menu.meta.icon : ''"
          />
          <span v-show="!collapsed" style="margin-left: 15px;">{{ menu.meta.title }}</span>
        </a-button>
        <template slot="content">
          <!-- 二级菜单 -->
          <div v-if="menu.children && menu.children.length > 0" class="subMenu">
            <ul
              v-for="(menuItem, index1) in menu.children"
              v-if="!menuItem.meta.hidden"
              :key="index1"
              class="subMenuItem">
              <li>
                <p v-if="menuItem.meta.disable" class="link" style="color: #96a6b6;">{{ menuItem.meta.title }}</p>
                <router-link
                  v-else
                  :to="menuItem.path"
                  class="link"
                  @click.native="hidePopover(index, `visible_${menu.name}`)"
                >
                  {{ menuItem.meta.title }}
                </router-link>
                <!-- 三级菜单 -->
                <ol v-if="menuItem.children && menuItem.children.length > 0">
                  <li v-for="(item, index2) in menuItem.children" :key="index2" v-if="!item.meta.hidden">
                    <router-link
                      :to="item.path"
                      class="link"
                      @click.native="hidePopover(index, `visible_${menu.name}`)"
                    >
                      {{ item.meta.title }}
                    </router-link>
                  </li>
                </ol>
              </li>
            </ul>
          </div>
        </template>
      </a-popover>
    </li>
  </ul>
</template>

<script>
  export default {
    name: 'SMenu',
    props: {
      menus: {
        type: Array,
        required: true
      },
      collapsed: {
        type: Boolean,
        required: false,
        default: false
      }
    },
    data () {
      return {
        // popover触发的唯一标识
        visibleData: []
      }
    },
    created () {
      this.generateVar()
    },
    methods: {
      // 生成控制popover的变量
      generateVar () {
        for (const item of this.menus) {
          const visibleName = 'visible_' + item.name
          const visibleObj = {}
          visibleObj[visibleName] = false
          this.visibleData.push(visibleObj)
        }
      },
      // 鼠标进/出 时 显示/隐藏popover
      handleHoverChange (index, visibleName, meta) {
        if (meta && meta.type && meta.type === 'outLink') {
          console.log('跳转外部链接')
        } else {
          this.visibleData[index][visibleName] = !this.visibleData[index][visibleName]
        }
      },
      // 点击链接时隐藏popover
      hidePopover (index, visibleName) {
        this.visibleData[index][visibleName] = false
      },
      // 选中的导航
      selectedMenu (menuPath) {
        const path = this.$route.path
        return path.indexOf(menuPath) === 0
      },
      // 点击一级路由，外部链接则跳转
      outLink (meta, path) {
        if (meta && meta.type && meta.type === 'outLink') {
          location.href = path
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  ul, ol, p {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
  }

  .sideMenu {
    padding: 16px 0;
    margin-bottom: 0;

    .item {
      padding: 0 24px;
      height: 40px;
      margin: 4px 0;
      text-align: left;
      border: 0;

      &.collapsed {
        text-align: center;
      }
    }

    .routeBtn {
      border-radius: 0;
      color: rgba(255, 255, 255, .65)
    }

    .routeActive {
      background: #52c41a !important;
      color: #fff;
    }
  }

  .subMenu {
    display: flex;
    padding: 8px 0;
    margin: 0 -16px;
    font-size: 13px;
    line-height: 35px;

    .subMenuItem {
      border-right: 1px solid #eef1f9;

      &:last-child {
        border-right: 0;
      }

      .link {
        padding: 0 40px;
      }
    }

    a {
      color: #415161;

      &:hover {
        color: #52c41a;
      }
    }
  }
</style>

<style lang="less">
  @import "menu";
</style>
